@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

$main-font: "Poppins", sans-serif;

$black: #000000; // Add this line to define the black color
$white: #ffffff;
$darkest-grey: #2e2e2e;
$dark-grey: #494949;
$grey: #6b7280;
$light-grey: #f3f4f6;
$dark-purple: #4838d2;
$purple: #2ad0a6;
$green: #10b981;
/*#2ad0a6;*/
$orange: #de00fc;
$light-red: #e5312d;
$red: #c62628;
$light-orange: #5cd9e4;

$bg-light-color: $white;
$bg-dark-color: $darkest-grey;
$font-color: $dark-grey;

// Updated main gradient with smoother transitions and better color harmony
$main-gradient: linear-gradient(
  to right,
  $dark-purple 0%,
  #6366f1 15%,
  #7c3aed 30%,
  #c026d3 50%,
  $orange 70%,
  #06b6d4 85%,
  $purple 100%
);

$green-gradient: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
$breakpoints: (
  ll: 1450px,
  lg: 1024px,
  md: 768px,
  sm: 640px,
) !default;
$max-width: 1440px;

$mobile-side-padding: 1.5rem;
$side-padding: 2rem;

$red-gradient: linear-gradient(to right, #cb356b, #bd3f32);

// Sizes
$default-radius: 0.5rem;

// Animations
$bezier-curve: cubic-bezier(0.4, 0, 0.2, 1);

// Typography
$main-font: "Inter", sans-serif;

// Make all variables available with !default flag
$black: $black !default; // Add this line
$white: $white !default;
$grey: $grey !default;
$light-grey: $light-grey !default;
$red: $red !default;
$green: $green !default;
$red-gradient: $red-gradient !default;
$default-radius: $default-radius !default;
$bezier-curve: $bezier-curve !default;
$main-font: $main-font !default;
